﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResponsiveBackgroundImage.aspx.cs" Inherits="OpenWaves.ImageTransformations.Showcase.ResponsiveBackgroundImage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .header {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Responsive image</h1>
            <p>Resize the browser window.</p>
            
            <ow:ResponsiveBackgroundImagePanel runat="server" ImageUrl="~/Content/Images/SampleImage1.jpg" CssClass="header" RenderXhtmlCompilantMarkup="<%# this.RenderXhtmlCompilantMarkup %>">
                <Breakpoints>
                    <ow:ImageBreakpoint Name="Phone" Transformation="ScaleToFill" Width="100" Height="100"/>
                    <ow:ImageBreakpoint Name="Tablet" Transformation="ScaleToFill" Width="400" Height="400"/>
                    <ow:ImageBreakpoint Name="Desktop" Transformation="ScaleToFill" Width="800" Height="800"/>                
                </Breakpoints>
                <Content>
                    <h1>Hello world!</h1>
                </Content>
            </ow:ResponsiveBackgroundImagePanel>
        </div>
    
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.0.js'></script>
        <script type="text/javascript" src="Scripts/ow.responsiveImage.js"></script>

        <script>
            $(function () {
                function getBreakpoint() {
                    if (window.innerWidth < 320) {
                        return "phone";
                    } else if (window.innerWidth < 720) {
                        return "tablet";
                    } else {
                        return "desktop";
                    }
                };

                $('.header').responsiveBackgroundImage({
                    breakpoint: getBreakpoint,
                    refreshTimeout: 100
                });
            });
        </script>

    </form>
</body>
</html>
